<template>
  <Card v-if="activityInfo" :bordered="false">
    <div class="flex gap-24px">
      <Image :src="activityInfo.coverUrl" width="240px" height="150px" />
      <Descriptions class="flex-1" :column="1" size="small">
        <DescriptionsItem label="活动名称">
          {{ activityInfo.title }}
          <Tag :color="activityStatusText.dictType" class="!ml-8px">{{
            activityStatusText.dictLabel
          }}</Tag>
        </DescriptionsItem>
        <DescriptionsItem label="活动地点">
          {{ activityInfo.address }}
        </DescriptionsItem>
        <DescriptionsItem label="报名费用">
          <div class="text-[#F53F3F]">
            <div v-if="activityInfo.maxPrice">
              ￥{{ activityInfo.minPrice }}~{{ activityInfo.maxPrice }}
            </div>
            <div v-else-if="activityInfo.minPrice === activityInfo.maxPrice && activityInfo.maxPrice">
              ￥{{ activityInfo.minPrice }}
            </div>
            <div v-else>免费</div>
          </div>
        </DescriptionsItem>
        <DescriptionsItem label="创建时间">
          {{ activityInfo.createTime }}
        </DescriptionsItem>
        <DescriptionsItem label="活动时间">
          {{ activityInfo.startTime }}~{{ activityInfo.endTime }}
        </DescriptionsItem>
      </Descriptions>
      <Button type="primary" ghost @click="handleRefresh">
        <template #icon>
          <RedoOutlined />
        </template>
        刷新数据
      </Button>
    </div>
  </Card>
</template>
<script setup lang="ts">
  import { ListItem } from '@/api/institution/model/activityListModel';
  import { Tag, Image, Button, Card, Descriptions, DescriptionsItem } from 'ant-design-vue';
  import Dictionary from '@/utils/dictionary';
  import { computed } from 'vue';
  import { RedoOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    activityInfo: { type: Object as () => ListItem, required: true },
  });

  const emits = defineEmits(['refresh']);
  const dicts = Dictionary.getLocalMulti(['activityStatus']);

  const activityStatusText = computed(() => {
    return (
      dicts.activityStatus.find((v) => v.dictValue === props.activityInfo.activityStatus) || {
        dictLabel: '未知',
        dictType: 'default',
      }
    );
  });

  const handleRefresh = () => {
    emits('refresh');
  };
</script>
